﻿@page "/tests/modals";
<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Modals (Default)</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    A rendered modal with header, body, and set of actions in the footer.
                </CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Clicked="@(()=>ShowModal( ModalSize.Default ))">
                    Standard Modal
                </Button>
                <Button Color="Color.Success" Clicked="@(()=>ShowModal( ModalSize.Small ))">
                    Small Modal
                </Button>
                <Button Color="Color.Info" Clicked="@(()=>ShowModal( ModalSize.Large ))">
                    Large Modal
                </Button>
                <Button Color="Color.Primary" Clicked="@(()=>ShowModal( ModalSize.Default, null, true ))">
                    Centered Modal
                </Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Modals (Sized)</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    Examples of custom size modals.
                </CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Info" Clicked="@(()=>ShowModal( ModalSize.ExtraLarge ))">
                    Extra Large Modal
                </Button>
                <Button Color="Color.Primary" Clicked="@(()=>ShowModal( ModalSize.Default, 50 ))">
                    Sized Modal (Body Height 50%)
                </Button>
                <Button Color="Color.Secondary" Clicked="@(()=>ShowModal( ModalSize.Default, 20 ))">
                    Sized Modal (Body Height 20%)
                </Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Modal @ref="modalRef">
    <ModalContent Size="@modalSize" Centered="@centered">
        <ModalHeader>
            <ModalTitle>
                <Icon Name="IconName.Edit" />
                Employee edit
            </ModalTitle>
            <CloseButton />
        </ModalHeader>
        <ModalBody MaxHeight="@maxHeight">
            <Field>
                <FieldLabel>Name</FieldLabel>
                <TextEdit Autofocus="true" Placeholder="Enter name..." />
            </Field>
            <Field>
                <FieldLabel>Surname</FieldLabel>
                <TextEdit Placeholder="Enter surname..." />
            </Field>
            <Field>
                <FieldLabel>Date of birth</FieldLabel>
                <DateEdit TValue="DateTime?" Placeholder="Pick a date" />
            </Field>
            <Field>
                <Button Color="Color.Primary" Clicked="@ShowModal2">Show second modal</Button>
            </Field>
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideModal">Close</Button>
            <Button Color="Color.Primary" Clicked="@HideModal">Save Changes</Button>
        </ModalFooter>
    </ModalContent>
</Modal>
<Modal @ref="modalRef2">
    <ModalContent Size="ModalSize.Small" Centered="true">
        <ModalHeader>
            <ModalTitle>
                Hello
            </ModalTitle>
            <CloseButton />
        </ModalHeader>
        <ModalBody>
            I am a second modal with some message.
            <Autocomplete TItem="MySelectModel"
                          TValue="string"
                          Data="@myDdlData"
                          TextField="@(( item ) => item.MyTextField)"
                          ValueField="@(( item ) => item.MyTextField)"
                          SelectedValue="@selectedSearchValue"
                          SelectedValueChanged="@MySearchHandler"
                          @bind-SelectedText="selectedAutoCompleteText"
                          Placeholder="Search..."
                          Filter="AutocompleteFilter.StartsWith"
                          FreeTyping="true"
                          CustomFilter="@(( item, searchValue ) => item.MyTextField.IndexOf( searchValue, 0, StringComparison.CurrentCultureIgnoreCase ) >= 0 )">
                <NotFoundContent> Sorry... @context was not found! :( </NotFoundContent>
            </Autocomplete>
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideModal2">Close</Button>
        </ModalFooter>
    </ModalContent>
</Modal>
@code{
    private Modal modalRef;
    private Modal modalRef2;
    private bool centered = false;
    private ModalSize modalSize = ModalSize.Default;
    private int? maxHeight = null;

    private Task ShowModal( ModalSize modalSize, int? maxHeight = null, bool centered = false )
    {
        this.centered = centered;
        this.modalSize = modalSize;
        this.maxHeight = maxHeight;

        return modalRef.Show();
    }

    private Task HideModal()
    {
        return modalRef.Hide();
    }

    private Task ShowModal2()
    {
        return modalRef2.Show();
    }

    private Task HideModal2()
    {
        return modalRef2.Hide();
    }


        public class MySelectModel
        {
            public int MyValueField { get; set; }
            public string MyTextField { get; set; }
        }

        static string[] Countries = { "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan", "Belarus", "Belgium", "Bosnia & Herzegovina", "Bulgaria", "Croatia", "Cyprus", "Czech Republic", "Denmark", "Estonia", "Finland", "France", "Georgia", "Germany", "Greece", "Hungary", "Iceland", "Ireland", "Italy", "Kosovo", "Latvia", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Malta", "Moldova", "Monaco", "Montenegro", "Netherlands", "Norway", "Poland", "Portugal", "Romania", "Russia", "San Marino", "Serbia", "Slovakia", "Slovenia", "Spain", "Sweden", "Switzerland", "Turkey", "Ukraine", "United Kingdom", "Vatican City" };
        IEnumerable<MySelectModel> myDdlData = Enumerable.Range( 1, Countries.Length ).Select( x => new MySelectModel { MyTextField = Countries[x - 1], MyValueField = x } );

        int selectedListValue { get; set; }
        int selectedDropValue { get; set; } = 2;
        string selectedSearchValue { get; set; }
        string selectedAutoCompleteText { get; set; }
        System.Collections.ObjectModel.ObservableCollection<int> items { get; } = new( Enumerable.Range( 1, 4 ) );
        Random random = new();

        void MyListValueChangedHandler( int newValue )
        {
            selectedListValue = newValue;
        }

        void MyDropValueChangedHandler( int newValue )
        {
            selectedDropValue = newValue;
        }

        void MySearchHandler( string newValue )
        {
            selectedSearchValue = newValue;
        }

        private void ShuffleList()
        {
            var maxIndex = items.Count - 1;

            if ( maxIndex == -1 )
                return;

            var orgPos = random.Next( maxIndex );
            var newPos = random.Next( maxIndex );

            items.Move( orgPos, newPos );
        }

        private static string GetColor( int number )
        {
            const string letters = "0123456789ABCDEF";

            var color = "";

            for ( var i = 0; i < 6; i++ )
            {
                color += letters[( 3 * number + i ) % letters.Length];
            }

            return $"color: #{color}";
        }

}
